Multimedia

JavaScript: de basis

Doelstelling

Na deze les kan je in JavaScript:

variabelen declareren;
werken met controlestructuren;
functies declareren;
de DOM manipuleren
events afhandelen

Leerplan

Oefening

Een lichtkrant maken

Filmpje Een lichtkrant maken in JavaScript

Maak een submap met de naam javascript:
|-javascript
  |-js
    |-marquee.js
  |-marquee.html

In het bestand met de naam javascript/js/marquee.js:

var scrollDelay = 2000; //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueeSpeed = 1; //Specify marquee scroll speed (larger is faster 1-10)
var timer;

var scrollArea;
var marquee;
var scrollPosition = 0;

var scrolling = function() {
  if (scrollPosition + scrollArea.offsetHeight <= 0) {
    scrollPosition = marquee.offsetHeight;
  }
  else {
    scrollPosition = scrollPosition - marqueeSpeed;

  }
  scrollArea.style.top = scrollPosition + "px";
}

var startScrolling = function() {
  timer = setInterval(scrolling, 30);
}

var initializeMarquee = function() {
  scrollArea = document.getElementById("scroll-area");
  scrollArea.style.top = 0;
  marquee = document.getElementById("marquee");
  setTimeout(startScrolling, scrollDelay);
}

var pauseMarquee = function() {
  if (marqueeSpeed > 0) {
    marqueeSpeed = 0;
  }
  else {
    marqueeSpeed = 1;
  }
}

var speedUpMarquee = function() {
  if (marqueeSpeed <= 3) {
    marqueeSpeed++;
    // alert(marqueeSpeed);
  }

}

var slowDownMarquee = function() {
  // alert(marqueeSpeed);
  if (marqueeSpeed > 1) {
    marqueeSpeed--;
  }
}

window.onload = initializeMarquee;

In het bestand met de naam javascript/marquee.html:

<!DOCTYPE html>
<!-- Alex Homer, Pro ASP.NET Web Forms Techniques, 2004 -->
<html>

<head>
    <title>JavaScript - Een autootje laten rijden</title>
    <meta charset="utf-8" />
    <meta name="application-name" content="Multimedia JavaScript">
    <meta name="description" content="De tijd controleren met JS - Een marquee maken met JavaScript">
    <meta name="keywords" content="HTML, JavaScript, setInterval, setTimeout">
    <meta name="author" content="Jef Inghelbrecht">
    <script src="js/marquee.js" type="text/javascript"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        h1 {
            margin-bottom: 1em;
            text-align: right;
            width: 250px;
        }
        #marquee {
            position: relative;
            width: 250px;
            height: 200px;
            background-color: yellow;
            padding: 5px;
            overflow: hidden;
        }
        
        #marquee #scroll-area {
            position: absolute;
            top: 0;
            padding: 5px;
        }
        
        .commandbar {
            margin: 1em 0 0 0;
            text-align: center;
            width: 250px;
        }
        
    </style>
</head>

<body>
    <h1>De gazet</h1>
    <div id="marquee" onMouseover="pauseMarquee();" onMouseout="pauseMarquee();">
        <div id="scroll-area">
            Toen ik als kind van de buurtwinkel terugkwam met gruyèrekaas, maakte mijn oom, die wekelijks op bezoek kwam, telkens hetzelfde grapje: ‘Heb je ook betaald voor de gaatjes?’ Nu worden jeansbroeken met scheuren en gaten in vele winkels verkocht, soms voor
            een (veel) hogere prijs dan een gewone jeans. Zo lanceerde het luxejeansmerk Dussault Apparel een Thrashed-versie voor maar liefst 250.000 dollar: een broek die al 13 keer gewassen was voor hij in de winkel kwam, tussendoor nog een paar keer
            opnieuw geverfd om meer diepte aan de kleur te geven én enkele scheuren vertoonde.
        </div>
    </div>
    <div class="commandbar">
        <button onClick="speedUpMarquee();" type="button">Sneller</button>
        <button onClick="slowDownMarquee();" type="button">Trager</button>
    </div>
</body>

</html>

Yaphi Berhanu, Make a Simple JavaScript Slideshow without jQuery, May 26, 2016 (optioneel)

Opdracht

Maak een eigen lichtkrant.
Deze opdracht hoef je niet in te sturen.
Deadline: de dag van het examen

JI

2019-05-05 16:29:16